<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	.big{
		width:480px;
		height:360px;
		background-color:red;
		overflow:hidden;
		position:relative;
	}

	img{
		width:550px;
		position:absolute;
		transition:all 0.3s ease 0.2s;
		top:-35px;
	}

	.big:hover img{
		top:0px;
	}

	.big:hover .font{
		top:155px;
	}

	.big .font{
		position:absolute;
		top:120px;
		left:120px;
		font-size:35px;
		color:white;
		transition:all 0.3s ease 0.2s;
	}

	.big .xfont{
		position:absolute;
		top:160px;
		left:80px;
		font-size:12px;
		color:white;
		transition:all 0.3s ease 0.2s;
		opacity:0;
		font-size:16px;
	}

	.big:hover .xfont{
		top:195px;
		opacity:1;
	}

	.big .yfont{
		position:absolute;
		top:180px;
		left:180px;
		font-size:12px;
		color:white;
		transition:all 0.3s ease 0.2s;
		opacity:0;
		font-size:16px;
	}

	.big:hover .yfont{
		top:215px;
		opacity:1;
	}

	.big .mengban{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background-color:rgb(120, 120, 54);
		z-index:1;
		opacity:0;
		transition:all 0.3s;
	}

	.big:hover .mengban{
		opacity:0.3;
	}

	.big .one{
		border:1px solid white;
		position:absolute;
		top:50px;
		left:30px;
		z-index:2;
		width:0%;
		transition:width 0.2s;
		opacity:0;
	}

	.big:hover .one{
		width:88%;
		opacity:1;
	}
</style>

<body>
	<div class="big">
		<div class="one"></div>
		<div class="mengban"></div>
		<img src="img/7.jpg" alt="">
		<div class="font">CRAZY <b>LAYLA</b></div>
		<p class="xfont">When Layla appears, she brings an eternal</p>
		<p class="yfont">summer along.</p>
	</div>
</body>
</html>